<template>
    <a-form
      ref="formRef"
      layout="inline"
      name="advanced_search"
      :model="formState"
      :style="{ 'row-gap': '10px', 'margin': '10px' }"
      @finish="onFinish"
    >
        <a-form-item name="account" label="用户账号">
            <a-input v-model:value="formState['account']" placeholder="请输入用户账号" />
        </a-form-item>
        <a-form-item name="name" label="用户姓名">
            <a-input v-model:value="formState['name']" placeholder="请输入用户姓名" />
        </a-form-item>
        <a-form-item name="phone" label="手机号码">
            <a-input v-model:value="formState['phone']" placeholder="请输入手机号码" />
        </a-form-item>
        <a-form-item label="账号状态">
            <a-select
              ref="select"
              v-model:value="value"
              style="width: 80px"
              @change="handleChange"
            >
                <a-select-option value="全部">全部</a-select-option>
                <a-select-option value="开启">开启</a-select-option>
                <a-select-option value="关闭">关闭</a-select-option>
            </a-select>
        </a-form-item>
        <a-button type="primary" html-type="submit" style="margin-right: 10px;">
            <template #icon>
                <SearchOutlined />
            </template>
            搜索
        </a-button>
        <a-button @click="resetForm">
            <template #icon>
                <SyncOutlined />
            </template>
            重置
        </a-button>
  </a-form>
</template>

<script lang='ts' setup>
import { ref } from 'vue';
import { 
    SearchOutlined,
    SyncOutlined
} from '@ant-design/icons-vue';
import { FormInstance } from 'ant-design-vue';
import { defineEmits } from 'vue';

interface FormState {
  account: string;
  name: string;
  phone: string;
}

const formRef = ref<FormInstance>();
const formState = ref<FormState>({
  account: '',
  name: '',
  phone: '',
});

//以下请求为匹配表格数据
const value = ref('全部');
const emit = defineEmits(['search', 'reset', 'selected'])
const handleChange = (value: string) => {
    //发起请求，选择状态
  emit('selected', value)
};

const onFinish = (values: FormState) => {
    //发起请求，获取搜索信息
  emit('search', values)
};

const resetForm = () => {
    //发起请求，清空搜索信息
  emit('reset')
  formRef.value?.resetFields()
}
</script>

<style scoped>

</style>